<!-- 性能任务创建，再列表页面中调用 -->
<template>
  <el-dialog title="创建任务" :visible.sync="visible" width="55%" :before-close="handleClose">
    <div style="padding-left: 20px;">
      <el-row :gutter="10">
        <el-col :span="4">
          <div style="height: 300px;">
            <el-steps direction="vertical" :active="active" finish-status="success">
              <el-step title="基本信息" />
              <el-step title="脚本文件" />
            </el-steps>
          </div>
        </el-col>
        <el-col :span="15">
          <el-form ref="form" label-position="left" :model="createTaskData" label-width="150px">
            <div v-if="active === 0">
              <el-form-item label="任务名称:">
                <br>
                <el-input v-model="createTaskData.taskName" />
              </el-form-item>
              <el-form-item label="启动时间(单位:秒)">
                <br>
                <el-input v-model="createTaskData.rampTime" />
              </el-form-item>
              <el-form-item label="持续时间(单位:秒)">
                <br>
                <el-input v-model="createTaskData.duration" />
              </el-form-item>
            </div>
            <div v-if="active === 1">
              <el-form-item label="任务脚本文件">
                <br>
                <el-table :data="createTaskData.scripts" style="width: 100%">
                  <el-table-column label="脚本">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.scriptId" filterable placeholder="请选择" @change="debugSelect">
                        <el-option v-for="script in scriptList" :key="script.id" :label="script.name" :value="script.id" />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="预设并发">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.users" controls-position="right" :min="1" :max="30000" label="执行时限定的并发值" />
                    </template>
                  </el-table-column>
                  <el-table-column label="预设QPS（0表示不限制）">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.qps" controls-position="right" :min="0" :max="1000000" label="执行时限定的最大QPS" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="handleAdd(scope.$index, scope.row)">增加</el-button>
                      <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </div>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div style="float: right;">
          <el-button v-if="active !== 1" style="margin-top: 12px;" :disabled="!canNext" @click="next">下一步</el-button>
          <el-button v-if="active === 1" style="margin-top: 12px;" :disabled="!canNext" @click="createTask">确认</el-button>
          <el-button style="margin-top: 12px;" :disabled="!canPrev" @click="prev">上一步</el-button>
        </div>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { createTask } from '@/api/perf/task.js'
import { searchAll } from '@/api/perf/script.js'
export default {
  data() {
    return {
      visible: false,
      active: 0,
      canNext: true,
      canPrev: false,
      createTaskData: { scripts: [{ users: 100, qps: 0 }] },
      scriptList: []
    }
  },
  methods: {
    initDialog() {
      this.visible = true
      this.active = 0
      this.refulshSelectData()
    },
    debugSelect(value) {
      // console.info(value)
    },
    createTask() {
      var data = {}
      data.taskName = this.createTaskData.taskName
      data.rampTime = this.createTaskData.rampTime
      data.duration = this.createTaskData.duration
      data.scripts = this.createTaskData.scripts
      console.info(JSON.stringify(data))
      createTask(data).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.visible = false
          this.$emit('refreshDataList')
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    refulshSelectData() {
      searchAll(1, 100000).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.scriptList = data.content
        } else {
          this.$message.warning(respnose.message)
        }
      })
    },
    next() {
      this.active++
      if (this.active > 0) {
        this.canNext = true
        this.canPrev = true
      }
      if (this.active > 2) {
        this.canNext = false
        this.canPrev = true
      }
    },
    prev() {
      this.active--
      if (this.active < 2) {
        this.canNext = true
        this.canPrev = true
      }
      if (this.active === 0) {
        this.canNext = true
        this.canPrev = false
      }
    },
    handleAdd(index, row) {
      this.createTaskData.scripts.push({ users: 100, qps: 0 })
    },
    handleDelete(index, row) {
      if (this.createTaskData.scripts.length === 1) {
        this.$message.warning('最后一条记录不可删除')
        return
      }
      this.createTaskData.scripts.splice(index, 1)
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    }
  }
}
</script>

<style>
</style>
